<template>
    <div class="product-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" class="yuan-modal product-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">产品信息</div>
                        <div class="form-panel-box yuan-form-col5">
<!--                            <a-form-model-item class="yuan-form-item" label="存货代码" prop="number">-->
<!--                                <span class="yuan-form-show"></span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="名称" prop="number">
                                <span class="yuan-form-show">{{ formData.varietyName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="物料代码" prop="number">
                                <span class="yuan-form-show">{{ formData.materialCode }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产地" prop="number">
                                <span class="yuan-form-show">{{ formData.placeOfOrigin }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产负责人" prop="number">
                                <span class="yuan-form-show">{{ formData.principal }}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="发药机编码" prop="number">-->
<!--                                <span class="yuan-form-show"></span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="生产批号" prop="number">
                                <span class="yuan-form-show">{{ formData.productionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产日期" prop="number">
                                <span class="yuan-form-show">{{ formData.productionTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓库" prop="number">
                                <span class="yuan-form-show">{{ formData.warehouse }}</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="产品图片" prop="name1" class="yuan-form-item">
                                <Upload :onlyShow="true" :defImgList="[formData.productPicture]" v-if="formData.productPicture" />
                                <span class="yuan-form-show" v-else>--</span>
                            </a-form-model-item>
                            <a-form-model-item label="生产场景" prop="name1" class="yuan-form-item">
                                <Upload :onlyShow="true" :defImgList="[formData.productionScene]"
                                    v-if="formData.productionScene" />
                                <span class="yuan-form-show" v-else>--</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="质量标准" prop="number">
                                <span class="yuan-form-show">{{formData.massStandard}}</span>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
                <div>
                    <a-tabs type="card" :default-active-key="1" @change="changeTab">
                        <a-tab-pane class="card-parent" tab="原料信息" :key="1">
                            <div class="table">
                                <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="pageListRaw"
                                    :pagination="false"></a-table>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane class="card-parent" tab="辅料信息" :key="2">
                            <div class="table">
                                <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="pageListAcc"
                                    :pagination="false"></a-table>
                            </div>
                        </a-tab-pane>
                    </a-tabs>
                </div>

            </a-spin>
            <template slot="footer">
                <template v-if="isPreview">
                    <a-button type="primary" @click="modalOption.onCancel">
                        关闭
                    </a-button>
                    <a-button type="primary" @click="modalOption.onOk">
                        确认提交
                    </a-button>
                </template>
                <template v-else>
                    <a-button type="primary" @click="modalOption.onCancel">
                        关闭
                    </a-button>
                </template>

            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import Upload from "@/components/upload.vue";
import nextApi from "@/api/nextApi";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isPreview!: boolean;
    @Prop({ default: "" }) editId!: string;
    @Prop({ default: "" }) previewData!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editId) {
                this.getDetail();
            } else if (this.isPreview) {
                this.formData = { ...this.previewData };
                this.pageListRaw = this.formData.yfInfo.filter((item: any) => item.rawType === "中药材");
                this.pageListAcc = this.formData.yfInfo.filter((item: any) => item.rawType === "辅料");
            }
        }
    }
    paginationRaw = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChangeRaw,
    };
    paginationAcc = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChangeAcc,
    };
    formLoading = false;
    columns = [
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "名称",
        },
        {
            align: "center",
            dataIndex: "enterStorageBatch",
            key: "enterStorageBatch",
            title: "入库批次",
        },
        {
            align: "center",
            dataIndex: "putIntoNumber",
            key: "putIntoNumber",
            title: "投入量",
            customRender: (text: string, record: any, index: number) => `${record.putIntoNumber}${record.unit}`,
        },
    ];
    getRowKey(item: any) {
        return item.id;
    }
    modalOption = {
        title: "生产详情",
        onCancel: this.closeModal,
        onOk: this.modalOk,
    };
    formData: any = {};

    async getDetail() {
        this.formLoading = true;
        try {
            const res = await nextApi.getProDetial({ id: this.editId });
            const materialListRaw = res.data.materialsList.filter((item) => item.type === "中药材");
            const rawOne = materialListRaw[0] || {};
            this.pageListRaw = [
                {
                    enterStorageId: rawOne.inventoryId,
                    varietyName: rawOne.varietyName,
                    enterStorageBatch: rawOne.enterThePlantNumber,
                    unit: rawOne.unit,
                    massStandard: rawOne.massStandard,
                    rawType: rawOne.type,
                    putIntoNumber: rawOne.input || "",
                },
            ];

            const materialListAcc = res.data.materialsList.filter((item) => item.type === "辅料");
            this.pageListAcc = materialListAcc.map((item) => {
                return {
                    enterStorageId: item.inventoryId,
                    varietyName: item.varietyName,
                    enterStorageBatch: item.enterThePlantNumber,
                    unit: item.unit,
                    massStandard: item.massStandard,
                    rawType: item.type,
                    putIntoNumber: item.input || "",
                };
            });
            this.formData = { ...res.data };

            this.formData.productType = "中药饮片(半成品)";
        } finally {
            this.formLoading = false;
        }
    }
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    changeTab() {}
    pageListRaw: any = [];
    pageChangeRaw() {}
    pageListAcc: any = [];
    pageChangeAcc() {}

    modalOk() {
        this.$emit("submit");
    }
}
</script>
<style lang="scss">
.product-detail-modal {
    .ant-tabs-bar {
        margin-bottom: 0;
    }

    .ant-tabs-content {
        padding: 10px;
        background-color: #fff;
        border-radius: 8px;
    }
}
</style>
